<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>极酷阳光V3.5播放器简单列表功能——演示</title>
<meta name="keywords" content="极酷阳光V3.5播放器简单列表功能(列表功能)演示" />
<meta name="description" content="极酷阳光V3.5播放器简单列表功能" />
<style type="text/css">
<!--
div { line-height:26px; font-size:14px;}
body { background:#ffffff url(CuPlayerBg.jpg); padding:10px;margin:10px;} 
div,ul,li,ol,dl,dt,dd,form,img,p{margin: 0; padding: 0; border: 0; }
li{list-style-type:none;} 
/* myplayer */
div#myplayer { width:980px; margin:0 auto; clear:both;}
div#CuPlayer { width:980px; height:455px;}
div.list {   width:980px; margin-top:10px;}
div.list dl { width:233px;float:left; margin-right:10px; margin-top:10px; }
div.list dl img{ width:70px;height:50px; float:left; margin-right:8px;}
div.list dl strong { display:block;}
div.list dl dt a { display:block; line-height:18px;padding-top:10px;  padding-left:10px; border:1px #cccccc solid; 
 height:65px; padding-top:10px; color:#333; font-size:12px; text-decoration:none; }
div.list dl dt a:hover{  height:65px; padding-top:10px;  text-decoration:none; background:#efefef;  border:1px #F30 solid}

div.help { line-height:32px; font-size:14px; clear:both; width:980px;margin:0 auto; font-family:"Microsoft YaHei","微软雅黑","Microsoft JhengHei",MingLiu,Verdana, Arial, Helvetica, sans-serif,"宋体"; margin-top:25px;}
h1 { border-bottom:1px #cccccc solid; line-height:58px;  }
.blank { clear:both; height:20px; }
.video { OVERFLOW: hidden; WIDTH: 100%; POSITION: relative}
.close_light_bg {DISPLAY: none; BACKGROUND: #000; FILTER: alpha(opacity = 95); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; opacity: .95}

ul.nav {width:980px;margin:0 auto;}
ul.nav li{ line-height:30px; height:30px;float:left; width:232px;margin-right:11px;}
ul.nav li a,ul.nav li a:link,ul.nav li a:visited{ background:#efefef; display:block; border:1px #666 solid; text-decoration:none; font-size:12px; text-align:center; color:#000; font-weight:bold;}
ul.nav li.on a,ul.nav li.on a:link,ul.nav li.on a:visited,ul.nav li a:hover {background:#b60229;  border:1px #b60229 solid;font-size:12px; color:#FF0; font-weight:bold; }
-->
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/action.js" ></script>
</head>
<body>
<div class="close_light_bg" id="close_light_bg"></div>

<ul class="nav" style="clear:both; ">
<li><a href="listDemo1.html">右侧图片列表</a></li>
<li><a href="listDemo2.html">右侧文字列表</a></li>
<li class="on"><a href="listDemo3.html">底部图片列表</a></li>
<li><a href="listDemo4.html">底部集数列表</a></li>
</ul>
<div class="blank"></div>
<!--myplayer/begin-->
<div id="myplayer" >
<!--极酷阳光V3.5免费版 代码开始-->
<div id="CuPlayer" class="video" > <strong>提示：您的Flash Player版本过低，请<a href="http://www.cuplayer.com/CuPlayer/" >点此进行播放器升级</a>！</strong> </div>
<div class="list"  >
  <dl>
  <dt><a href="#" onclick="changeStream(0);"><img src="pic/pic01.jpg" /><strong>1吉利集团宣传</strong><span>发布日期：2015.03.25</span></a></dt>
  </dl>
  <dl>
  <dt><a href="#" onclick="changeStream(1);"><img src="pic/pic02.jpg" /><strong>2吉利博瑞牙克石冰雪测试</strong><span>发布日期：2015.03.25</span></a></dt>
  </dl>
  <dl>
  <dt><a href="#" onclick="changeStream(2);"><img src="pic/pic03.jpg" /><strong>3全新帝豪概念车隆重发布</strong><span>发布日期：2015.03.25</span></a></dt>
  </dl>
  <dl>
  <dt><a href="#" onclick="changeStream(3);"><img src="pic/pic04.jpg" /><strong>4吉利集团宣传片</strong><span>发布日期：2015.03.25</span></a></dt>
  </dl>
  <dl>
  <dt><a href="#" onclick="changeStream(4);"><img src="pic/pic05.jpg" /><strong>5吉利博瑞产品篇</strong><span>发布日期：2015.03.25</span></a></dt>
  </dl>
  <dl>
  <dt><a href="#" onclick="changeStream(5);"><img src="pic/pic06.jpg" /><strong>6全新帝豪概念车隆重发布</strong><span>发布日期：2015.03.25</span></a></dt>
  </dl>
  <dl>
  <dt><a href="#" onclick="changeStream(6);"><img src="pic/pic07.jpg" /><strong>7吉利博瑞牙克石冰雪测试</strong><span>发布日期：2015.03.25</span></a></dt>
  </dl>
</div>
  
<script type=text/javascript>
<!--
//极酷阳光V3.5免费版：官方连播代码示例20160519//
var CuPlayerList ="http://admin.geely.com/videoFile/brcp.flv|http://admin.geely.com/videoFile/cmbs.flv|http://admin.geely.com/videoFile/150420.1080P.flv|http://admin.geely.com/videoFile/geelyxingxiang.flv|http://admin.geely.com/videoFile/brcp.flv|http://admin.geely.com/videoFile/dgjz.flv|http://admin.geely.com/videoFile/cmbs.flv"
var sp =CuPlayerList.split("|")  
var num = sp.length;
var video_index = 0;
function getNext(pars)
{	
  if(video_index < num-1)
	{ 
		video_index++;
		so.addVariable("JcScpVideoPath",sp[video_index]);
		so.addVariable("JcScpAutoPlay","yes"); //是否自动播放
		so.write("CuPlayer");	
	}
	else
	{
	video_index = 0;
	so.addVariable("CuPlayerFile",sp[video_index]);
	so.write("CuPlayer");	
	}
	$(".list dl dt a").css("background","#ffffff").css("color","#333");
	$(".list dl dt a").eq(video_index).css("background","#6f5d6b").css("color","white");
	LeftScr(video_index);
}
function changeStream(CuPlayerFile){
$(".list dl dt a").css("background","#ffffff").css("color","#333");
$(".list dl dt a:hover").css("background","#6f5d6b").css("color","white");
LeftScr(CuPlayerFile);
video_index = CuPlayerFile;
so.addVariable("JcScpVideoPath",sp[CuPlayerFile]);
so.addVariable("JcScpAutoPlay","yes"); //是否自动播放
so.write("CuPlayer");	
return false;
}
CuPlayerFile =sp[video_index];
$(".list dl dt a").css("background","#ffffff").css("color","#333");
$(".list dl dt a").eq(video_index).css("background","#6f5d6b").css("color","white");
var so = new SWFObject("player.swf","ply","980","455","9","#000000");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","always");
so.addParam("wmode","opaque");
so.addParam("quality","high");
so.addParam("salign","lt");
so.addVariable("JcScpFile","CuSunV4setNext.xml"); //* 必须存在/播放器配置文件地址
so.addVariable("JcScpVideoPath",CuPlayerFile);
so.addVariable("JcScpImg","images/startpic.jpg"); 
so.addVariable("JcScpAutoPlay","yes"); //是否自动播放
so.write("CuPlayer");	

function LeftScr(m){
	var scrtop;
	if(m>1){
	scrtop=55*(m-1);
	}else{
		scrtop=0;
		}
	$(".list").animate({
		scrollTop:scrtop
		},130);
	}
//-->
</script>
<!--极酷阳光V3.5免费版 代码结束-->
</div>
<!--myplayer/end-->


<!-- help/Bgein -->
<div class="blank"></div>
<div class="help">
<h1>酷播V4.0版<strong style="color:red;">简单列表功能</strong>官方演示( 下方图片列表 )</h1>
 <p>
        <strong>播放器使用环境及注意事项：</strong><br />
        *  强烈建议使用<strong>酷播云端播放器</strong>（永久免费 /  支持视频数据统计分析），<a href="http://www.cuplayer.com/Cloud" target="_blank">马上使用&gt;&gt;</a><br />
        *  请用户在IIS下或其它web网站环境下使用，<a href="http://www.cuplayer.com/CuPlayer/help/Step/" target="_blank">新手指南&gt;&gt;</a>；<br />
        *  请确认您的环境是否支持支持flv,mp4等视频文件的mime类型，<a href="http://www.cuplayer.com/CuPlayer/help/Help71.html" target="_blank" class="cOrange">详细参见&gt;&gt;</a>；<br />
        *  播放器在使用过程中，支持加载XML(asp,php,jsp,aspx)等格式配置文件，<a href="http://www.cuplayer.com/CuPlayer/help/Help61.html" target="_blank" class="cOrange">详细参见&gt;&gt;</a>；<br />
        *  建议使用之前了解一下本款播放器&ldquo;<strong>双重参机机制</strong>&rdquo;的含义，<a href="http://www.cuplayer.com/CuPlayer/help/Help23.html" target="_blank">详细参见&gt;&gt;</a>。<br />
        * 请确认播放器相关的文件地址是否正确。<br />
        <strong>遇到问题如何获得帮助：</strong>        <br />
        * 官方应用文档：<a href="http://www.cuplayer.com/CuPlayer/help/index.html" target="_blank" class="cOrange">http://www.cuplayer.com/CuPlayer/help/index.html</a><br />
        * 酷播官方客服：<a href="http://www.cuplayer.com/CuPlayer/service.html" target="_blank">http://www.cuplayer.com/CuPlayer/service.html</a><br />
        <strong>如何正确的向客服提问？</strong> <br />
    A:请将您的测试页上传到您的某个网站目录下，然后把测试页地址发给客服，此种情况下，问题解决率达90%以上。<br />
    （如果您无法提供测试页地址，很多问题，无法协助您找出准确的原因）； <br />
  B:不能提供外网测试页面的提问，问题解决率仅为5% 左右。<br />
  <strong>酷播V4.0版官方网站：</strong> <a href="http://www.cuplayer.com/CuPlayer/" target="_blank">http://www.cuplayer.com/CuPlayer/</a><br />
<strong>酷播云端播放器官方网站：</strong> <a href="http://www.cuplayer.com/Cloud/" target="_blank">http://www.cuplayer.com/Cloud/</a><br /></p>
</div>
<!-- help/End -->
<div style="display:none;">
<script type="text/javascript" src="http://www.cuplayer.com/CuPlayer/js/stat.js"></script>
</div>
</body>
</html>